<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h, provide, inject } = VueRuntimeDOM;
    const VueComponent = {
      setup() {
        let user = inject("user", { name: "hu.lei", age: 21 });
        return () => {
          return h("div", user.name);
        };
      },
    };

    let app = createApp({
      setup() {
        let state = reactive({ name: "hulei", age: 20 });
        provide("user", state);
        return () => {
          return h(VueComponent);
        };
      },
    });
    app.mount("#app");
  </script>
</html>
